<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input[type=text]{width: 40px;}
    input[type=text][readonly]{width: 220px;}
  </style>
</head>
<body>
  <input type="text" class="year">
  <input type="text" class="month">
  <input type="text" class="date">
  <input type="button" class="btn" value="计算">
  <input type="text" class="result" readonly>
</body>
<script>
  var yearElement = document.querySelector(".year");
  var monthElement = document.querySelector(".month");
  var dateElement = document.querySelector(".date");
  var btnElement = document.querySelector(".btn");
  var resultElement = document.querySelector(".result");
  
  
  btnElement.onclick = function(){

    var y = yearElement.value - 0;
    var m = monthElement.value * 1;
    var d = dateElement.value / 1;

    var res = 0;

    switch( m ){
      case 12: res += 30;
      case 11: res += 31;
      case 10: res += 30;
      case 9: res += 31;
      case 8: res += 31;
      case 7: res += 30;
      case 6: res += 31;
      case 5: res += 30;
      case 4: res += 31;
      case 3:
        if( y%4 === 0 && y%100 !== 0 || y%400 === 0 ){
          res += 29;
        }else{
          res += 28;
        }
      case 2: res += 31;
      case 1: res += d;break;
      default:
        console.log("以上case都没成功");
    }

    resultElement.value = y + "年" + m + "月" + d + "号是这一年的第" + res + "天";
  }

  // 报错信息：Cannot read properties of null (reading 'value')
    // 无法读取null的value属性（value前的变量为null）
  // 原因：变量未正确保存所需信息
  
  // 报错信息：Cannot set properties of null (setting 'onclick')
    // 无法读取null的onclick属性（onclick前的变量为null）
  // 原因：变量未正确保存所需信息

  // 报错信息：月 is not defined
    // 月 变量未定义
  // 原因：在定义变量之前，使用了这个变量

  // 没有报错信息，也没有显示结果

  // 逐步查找，配合console.log(1)或者console.log(变量)

  // 事件发生后，才能获取到输入框信息
  
</script>
</html>